import { Button, List, DatePicker, NavBar, Dialog } from "antd-mobile"
import classNames from "classnames"
import { useHistory } from "react-router-dom"
import styles from "./index.module.scss"
import { useDispatch } from "react-redux"
// import { useEffect } from "react"
import { getUserInfo } from "@/store/actions/profile"
// import { RootState } from "@/types/store"
import { useInitialState } from "@/utils/use-initial-state"
import { Popup } from "antd-mobile"
import EditInput from "./components/editinput"
import { useState } from "react"
import { updateUserInfo } from "@/store/actions/profile"
import EditList from "./components/EditList"
import { logout } from "@/store/actions/login"

const Item = List.Item

type InputPopup = {
  type: "" | "name" | "intro"
  value: string
  visible: boolean
}
type ListPopup = {
  type: "" | "gender" | "photo"
  visible: boolean
}
const ProfileEdit = () => {
  const history = useHistory()
  const dispatch = useDispatch()
  const { userinfo } = useInitialState(getUserInfo, "profile")
  const [inputPopup, setInputPopup] = useState<InputPopup>({
    type: "",
    value: "",
    visible: false,
  })
  const onInputShow = (
    type: InputPopup["type"],
    value: InputPopup["value"]
  ) => {
    setInputPopup({
      type,
      value,
      visible: true,
    })
  }
  // 关闭弹层
  const onInputHide = () => {
    setInputPopup({
      type: "",
      value: "",
      visible: false,
    })
  }
  const [listPopup, setListPopup] = useState<ListPopup>({
    type: "",
    visible: false,
  })

  const onGenderShow = () => {
    setListPopup({
      type: "gender",
      visible: true,
    })
  }
  const onGenderHide = () => {
    setListPopup({
      type: "",
      visible: false,
    })
  }
  const onUpdateProfile = async (
    type: "name" | "intro" | "gender" | "photo" | "birthday",
    value: string
  ) => {
    await dispatch(updateUserInfo({ [type]: value }))
    onInputHide()
    onListPopupHide()
  }
  const onListPopupHide = () =>
    setListPopup({
      type: "",
      visible: false,
    })
  const onLogout = () => {
    const handler = Dialog.show({
      title: "温馨提示",
      content: "亲，你确定退出吗？",
      actions: [
        [
          {
            key: "cancel",
            text: "取消",
            onClick: () => {
              handler.close()
            },
          },
          {
            key: "confirm",
            text: "退出",
            style: {
              color: "var(--adm-color-weak)",
            },
            onClick: () => {
              dispatch(logout())
              handler.close()
              history.replace("/login")
            },
          },
        ],
      ],
    })
  }
  return (
    <div className={styles.root}>
      <Popup visible={listPopup.visible} onMaskClick={onGenderHide}>
        <EditList
          onClose={onListPopupHide}
          type={listPopup.type}
          onUpdateProfile={onUpdateProfile}
        />
      </Popup>
      <Popup visible={inputPopup.visible} position="right">
        <EditInput
          key={inputPopup.type}
          type={inputPopup.type}
          value={inputPopup.value}
          onUpdateProfile={onUpdateProfile}
          onClose={onInputHide}
        />
      </Popup>
      <div className="content">
        {/* 标题 */}
        <NavBar
          style={{
            "--border-bottom": "1px solid #F0F0F0",
          }}
          onBack={() => history.goBack()}
        >
          个人信息
        </NavBar>

        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <Item
              extra={
                <span className="avatar-wrapper">
                  <img width={24} height={24} src={userinfo.photo} alt="" />
                </span>
              }
              arrow
            >
              头像
            </Item>
            <Item
              arrow
              extra={userinfo.name}
              onClick={() => onInputShow("name", userinfo.name ?? "")}
            >
              昵称
            </Item>
            <Item
              arrow
              onClick={() => onInputShow("intro", userinfo.intro ?? "")}
              extra={
                <span className={classNames("intro", "normal")}>
                  {userinfo.intro || ""}
                </span>
              }
            >
              简介
            </Item>
          </List>

          <List className="profile-list">
            <Item
              onClick={onGenderShow}
              arrow
              extra={userinfo.gender === 0 ? "男" : "女"}
            >
              性别
            </Item>
            <Item arrow extra={userinfo.birthday}>
              生日
            </Item>
          </List>

          <DatePicker
            visible={false}
            value={new Date()}
            title="选择年月日"
            min={new Date(1900, 0, 1, 0, 0, 0)}
            max={new Date()}
          />
        </div>

        <div className="logout">
          <Button className="btn" onClick={onLogout}>
            退出登录
          </Button>
        </div>
      </div>
    </div>
  )
}

export default ProfileEdit
